<template>
  <!-- 面包屑导航 -->
  <div className="break">
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>食堂管理</el-breadcrumb-item>
      <el-breadcrumb-item><b>商家管理</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <!-- 搜索工具栏-->
  <div style="margin:40px 20px 20px 20px">
    <el-form :inline="true" ref="searchFormRef" :model="searchFormModel" class="demo-form-inline" style="margin-top: 20px">
      <el-form-item label="店铺" prop="mname">
        <el-input v-model="searchFormModel.mname" placeholder="请输入店铺" clearable />
      </el-form-item>
      <el-form-item label="类型" prop="mrange">
        <el-select v-model="searchFormModel.mrange" placeholder="请选择类型" clearable style="width: 100px">
          <el-option label="面食" value="面食"></el-option>
          <el-option label="西餐" value="西餐"></el-option>
          <el-option label="家常菜" value="家常菜"></el-option>
          <el-option label="饮品" value="饮品"></el-option>
          <!-- 可以根据需要添加更多的菜品类型 -->
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="searchOnSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
  <!--  数据表格-->
  <div style="margin:20px">
    <el-table :data="blogInfo" stripe border style="width: 100%"
    >
      <el-table-column prop="mname" label="店铺名" width="180px"/>
      <el-table-column prop="mphone" label="电话号"  />
      <el-table-column prop="maddress" label="店铺地址" />
      <el-table-column prop="mrange" label="类型" />
      <el-table-column prop="canteen" label="食堂" />
      <el-table-column label="操作" width="160">
        <template #default="scope">
          <el-button
              size="small"
              :type="scope.row.status === 1 ? 'success' : 'danger'"
              @click="lockOrUnlockHandler(scope.row)"
          >
            {{ scope.row.status === 1 ? '锁定' : '解锁' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!--  分页-->
  <div class="page" style="width: 50%;margin: 0 auto;padding-left: 230px">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[8,10]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="totals"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import {Unlock,Lock,Delete,Edit} from "@element-plus/icons";
import {onMounted, reactive, ref} from "vue";
import request from "@/utils/canteen";
import {ElMessage, ElMessageBox} from "element-plus";
import {ArrowRight} from "@element-plus/icons-vue";
onMounted(()=>{

  getDish();
})

//分页
const currentPage = ref(1)
const pageSize = ref(8)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let totals=ref(0);
const  blogInfo=ref([])

const userInfo=reactive({
  'mid':'',
})
const mallidvalue = ref([])


// 表格显示内容
const getDish = () => {
  const params={
    pageNum: currentPage.value,
    pageSize: pageSize.value,
  };
  // 模糊查询
  if (searchFormModel.mname && searchFormModel.mname.trim() !== '') {
    params.mname = searchFormModel.mname.trim();
  }
  if (searchFormModel.mrange && searchFormModel.mrange.trim() !== '') {
    params.mrange = searchFormModel.mrange.trim();
  }
  if (userInfo.mid != null){
    params.mallid=userInfo.mid;
  }
  request({
    url: '/can/getPages1',
    method: 'get',
    params,
  }).then((req) => {
    console.log(req)
    if (200 == req.data.errorCode) {
      blogInfo.value = req.data.data.records.map(item => ({
        ...item,
        isLocked: item.status === 0 // 根据数据库中的status值设置isLocked
      }));
      totals.value = req.data.data.total;
    }
  })
}


//搜索
const searchFormRef=ref()
const searchFormModel=reactive({
  mname:'',
  mrange:''
})
const searchOnSubmit=()=>{
  getDish()
}
const searchOnReset=()=>{
  searchFormModel.mname=''
}
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  pageSize.value=val;
  getDish();
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  currentPage.value=val;
  getDish()
}


// 锁定或解锁商家状态
const lockOrUnlockHandler = (row) => {
  // 确定请求的类型和URL
  let action;
  const url = `/can/${row.status === 1 ? 'lock' : 'unlock'}/${row.mid}`;
  if (row.status === 1) {
    action = 'lock'; // 当前状态为未锁定（1），需要发送锁定请求
  } else {
    action = 'unlock'; // 当前状态为锁定（0），需要发送解锁请求
  }

  // 发送请求到服务器
  request({
    url: url,
    method: 'put',
  }).then(response => {
    console.log(response)
    if (response.data.errorCode == 1) {
      ElMessage.success('操作成功');
      // 根据操作更新表格中对应行的 status 状态
      row.status = action === 'lock' ? 0 : 1;
      // 操作成功后，可以根据需要刷新表格数据
       getDish(); // 取消注释并在合适的时候使用此行来刷新表格
    } else {
      ElMessage.error(response.data.message || '操作失败');
    }
  }).catch(error => {
    ElMessage.error('请求失败');
  });
};
</script>

<style scoped>
.el-breadcrumb{
  font-size: 18px;
  margin: 20px;
}
</style>